<style>
    .agentpaySetDIV {
        margin-top: 20px;
    }
    .agentpaySetDIV .layui-form-label {
        width:15% !important;
        margin-left:1%;
    }
    .agentpaySetDIV .layui-input-inline {
        width: 33% !important;
    }
</style>

<div class="layui-card-header layui-card">
    <span class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">首页</a>
        <a><cite>商户</cite></a>
        <a><cite>安全中心</cite></a>
    </span>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">安全中心</li>
            </ul>
            <div class="layui-tab-content">
                <style>
                    .center {
                        width: 80%;
                    }
                </style>

                <div class="layui-card">
                    <div class="layui-card-header"><span class="layui-badge layui-bg-gray">商户秘钥</span></div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-md8">
                                <span id="privateKeyTip"></span>
                            </div>
                            <div class="layui-col-xs6 layui-col-md4">
                                <a type="button" id="privateKeyBtn" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-about"></i>查看</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><span class="layui-badge layui-bg-gray">谷歌验证</span></div>
                    <div class="layui-card-body">
                        <div id="yesBind" style="display: none">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-md8">
                                    <span>已绑定: 您已绑定谷歌验证</span>
                                    <div>手机客户端下载地址: <a href="http://shouji.baidu.com/software/item?docid=3832652&from=as" target="_blank">Android</a> / <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605?mt=8" target="_blank">IOS</a></div>
                                </div>
                                <div class="layui-col-xs6 layui-col-md4">
                                    <button type="button" lay-submit class="layui-btn layui-btn-danger layui-btn-sm">已绑定</button>
                                </div>
                            </div>
                        </div>
                        <div id="noBind" style="display: none">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-md8">
                                    <span>未绑定: 您未绑定谷歌验证</span><br>
                                    <span style="color: orangered;">提示:为了您的资金安全,请尽快绑定谷歌验证码!</span>
                                    <div>手机客户端下载地址: <a href="http://shouji.baidu.com/software/item?docid=3832652&from=as" target="_blank">Android</a> / <a href="https://itunes.apple.com/cn/app/google-authenticator/id388497605?mt=8" target="_blank">IOS</a></div>
                                </div>
                                <div class="layui-col-xs6 layui-col-md4">
                                    <a type="button" id="bindGoogleAuth" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-link"></i>绑定</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><span class="layui-badge layui-bg-gray">登录设置</span></div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-md8">
                                <span id="loginSetTip"></span>
                            </div>
                            <div class="layui-col-xs6 layui-col-md4">
                                <a type="button" id="loginSetBtn" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-util"></i>更换</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><span class="layui-badge layui-bg-gray">支付设置</span></div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-md8">
                                <span id="paySetTip"></span>
                            </div>
                            <div class="layui-col-xs6 layui-col-md4">
                                <a type="button" id="paySetBtn" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-util"></i>更换</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><span class="layui-badge layui-bg-gray">代付设置</span></div>
                    <div class="layui-form agentpaySetDIV" id="agentpaySetDIV">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商户代付模式</label>
                            <div class="layui-input-inline">
                                <select id="agentpayMode" disabled>
                                    <option value="1">仅代付接口</option>
                                    <option value="2">仅后台接口</option>
                                    <option value="3">接口 + 后台</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">代付接口二次确认</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="agentpayAPIConfirmFlag" value="0" title="无需确认" checked="checked" lay-filter="agentpayAPIConfirmFilter">
                                <input type="radio" name="agentpayAPIConfirmFlag" value="1" title="需要确认" lay-filter="agentpayAPIConfirmFilter">
                            </div>
                        </div>

                        <fieldset class="layui-elem-field" style="width: 60%;margin-left: 5%" id="agentpaySetJsonDiv">
                            <legend><button class="layui-btn layui-btn-xs layui-btn-danger">二次确认参数</button></legend>
                            <div class="layui-form-item">
                                <label class="layui-form-label">代付接口二次确认地址</label>
                                <div class="layui-input-inline">
                                    <input name="agentpayAPIConfirmUrl" id="agentpayAPIConfirmUrl" placeholder="代付接口商户确认地址,请以http://或https://开头" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商户订单号（参数名）</label>
                                <div class="layui-input-inline">
                                    <input name="mchOrderNo" id="mchOrderNo" value="mchOrderNo" placeholder="发送的商户订单号参数名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">代付金额（参数名）</label>
                                <div class="layui-input-inline">
                                    <input name="amount" id="amount" value="amount" placeholder="发送的金额参数名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">成功回调返回值</label>
                                <div class="layui-input-inline">
                                    <input name="notifySuccessStatus" value="ok" id="notifySuccessStatus" placeholder="成功回调返回值" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">失败回调返回参数</label>
                                <div class="layui-input-inline">
                                    <input name="notifyFailStatus" value="fail" id="notifyFailStatus" placeholder="失败回调返回参数" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                        </fieldset>

                        <div class="layui-form-item" style="margin-top: 10px">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-inline">
                                <a type="button" lay-submit lay-filter="saveAgentpaySetBtn" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-util"></i>保存代付设置</a>
                            </div>

                        </div>

                        <p style="color: red"> 1. 当选择 [需要确认] 后，商户每次通过API接口形式发起的代付订单，会先通过接口推送到商户系统进行二次确认，确认无误后再继续执行代付任务。 如接口异常或拒绝则直接代付失败；</p>
                        <p style="color: red"> 2. 选择[需要确认]后， 请务必填写二次确认地址；</p>
                        <p style="color: red"> 3. 接口协议查看：<a style="color: blue" href="/start/index.html#/dev/pay_doc/agentpay_api">代付API接口文档</a> </p>

                    </div>

                </div>

            </div>
        </div>

    </div>
</div>

<div class="layui-tab-content" id="privateKeyDiv" style="display: none">
    <form class="layui-form center" lay-filter="privateKeyDivForm">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">商户秘钥</label>
            <div class="layui-input-block">
                <textarea name="privateKey" id="privateKey" placeholder="请输入秘钥" required lay-verify="required" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">谷歌验证码</label>
            <div class="layui-input-block">
                <input type="text" required id="privateKeyCode" name="code" lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block">
                <button type="button" id="randomBuildKey" class="layui-btn layui-btn-sm">随机生成秘钥</button>
                <button type="button" lay-filter="btnPrivateKey" lay-submit class="layui-btn layui-btn-sm">修改秘钥</button>
            </div>
        </div>
    </form>
</div>

<div class="layui-tab-content" id="googleAuthDiv" style="display: none">
    <form class="layui-form center">
        <div style="text-align: center">
            <img id="googleQrCode" src="">
            <div style="margin-bottom: 10px;">
                请使用Google身份验证器扫描上方二维码</br>
                扫描不了？使用手机号+秘钥获取</br>
                账号：<span id="phone"></span></br>
                秘钥：<span id="googleKey"></span></br></br>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">谷歌验证码</label>
            <div class="layui-input-block">
                <input type="text" required id="googleAuthCode" name="code" lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block">
                <button type="button" lay-filter="btnBind" lay-submit class="layui-btn layui-btn-sm">绑定</button>
            </div>
        </div>
    </form>
</div>

<div class="layui-tab-content" id="loginSetDiv" style="display: none">
    <form class="layui-form center" lay-filter="loginSetDivForm">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">验证方式</label>
            <div class="layui-input-block">
                <input type="radio" name="loginSecurityType" value="1" title="仅登录密码验证"><br/>
                <input type="radio" name="loginSecurityType" value="2" title="登录密码+谷歌组合验证(需绑定谷歌验证)">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">谷歌验证码</label>
            <div class="layui-input-block">
                <input type="text" required id="loginSetCode" name="code" lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block">
                <button type="button" lay-filter="btnLoginSet" lay-submit class="layui-btn layui-btn-sm">确定</button>
            </div>
        </div>
    </form>
</div>

<div class="layui-tab-content" id="paySetDiv" style="display: none">
    <form class="layui-form center" lay-filter="paySetDivForm">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">验证方式</label>
            <div class="layui-input-block">
                <input type="radio" name="paySecurityType" value="0" title="无需验证"><br/>
                <input type="radio" name="paySecurityType" value="1" title="仅支付密码验证"><br/>
                <input type="radio" name="paySecurityType" value="2" title="仅谷歌验证(需绑定谷歌验证)">
                <input type="radio" name="paySecurityType" value="3" title="支付密码+谷歌组合验证(需绑定谷歌验证)"><br/>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">谷歌验证码</label>
            <div class="layui-input-block">
                <input type="text" required id="paySetCode" name="code" lay-verify="required|number" placeholder="请输入谷歌验证码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ">
            <div class="layui-input-block">
                <button type="button" lay-filter="btnPaySet" lay-submit class="layui-btn layui-btn-sm">确定</button>
            </div>
        </div>
    </form>
</div>

<script>
   layui.use(['table','laytpl','admin',], function(){
        var form = layui.form
            ,laytpl = layui.laytpl
            ,table = layui.table
            ,$ = layui.$
            ,admin = layui.admin
            ,element = layui.element;

        element.render('breadcrumb', 'breadcrumb');//渲染导航信息

       $.refresh = function() {
           admin.req({
               type: 'get',
               url:  layui.setter.baseUrl + '/mch/get' //模拟基本信息接口,
               ,error: function(err){
                   console.log(err)
               },
               success: function(res){
                   if(res.code == 0){
                       var privateKey = res.data.privateKey;
                       if(privateKey != null && privateKey.length > 0) {
                           $("#privateKeyTip").html("已设置 <p style='color: orangered'>提示：为了安全,不可查看当前的秘钥,可重新修改自行留存(如需查看当前秘钥可联系平台客服)！</p>");
                           $('#privateKey').val(res.data.privateKey);
                       }else {
                           $("#privateKeyTip").html("没有设置 <p style='color: orangered'>提示：在使用支付接口前必须设置秘钥！</p>");
                       }
                       form.render('radio', 'privateKeyDivForm');
                       // 谷歌验证绑定
                       var googleAuthStatus = res.data.googleAuthStatus;
                       if(googleAuthStatus == 1) {
                           $('#yesBind').show();
                           $('#noBind').hide();
                       }else if(googleAuthStatus == 0) {
                           $('#yesBind').hide();
                           $('#noBind').show();
                       }
                       // 登录设置
                       var loginSecurityType = res.data.loginSecurityType;
                       $("input[name='loginSecurityType'][value='"+ loginSecurityType +"']").attr("checked", true);
                       if(loginSecurityType == 1) {
                           $("#loginSetTip").html("已设置: 仅登录密码验证 <p style='color: orangered'>提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！</p>");
                       }else if(loginSecurityType == 2) {
                           $("#loginSetTip").html("已设置: 登录密码+谷歌组合验证(需绑定谷歌验证)");
                       }
                       form.render('radio', 'loginSetDivForm');
                       // 支付设置
                       var paySecurityType = res.data.paySecurityType;
                       $("input[name='paySecurityType'][value='"+ paySecurityType +"']").attr("checked",true);
                       if(paySecurityType == 0) {
                           $("#paySetTip").html("已设置: 无需验证 <p style='color: orangered'>提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！</p>");
                       }else if(paySecurityType == 1) {
                           $("#paySetTip").html("已设置: 仅支付密码验证 <p style='color: orangered'>提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！</p>");
                       }else if(paySecurityType == 2) {
                           $("#paySetTip").html("已设置: 仅谷歌验证(需绑定谷歌验证)");
                       }else if(paySecurityType == 3) {
                           $("#paySetTip").html("已设置: 支付密码+谷歌组合验证(需绑定谷歌验证)");
                       }
                       $("#phone").html(res.data.mobile);

                       //代付模式
                       $("#agentpayMode option[value='"+res.data.agentpayMode+"']").attr("selected", true);
                       $("input[name='agentpayAPIConfirmFlag'][value='"+res.data.agentpayAPIConfirmFlag+"']").attr("checked", true); //代付二次确认状态
                       $('#agentpayAPIConfirmUrl').val(res.data.agentpayAPIConfirmUrl); //代付二次确认URL

                       if (res.data.agentpayAPIConfirmFlag == '0') {
                           $("#agentpaySetJsonDiv").hide();
                       } else {
                           $("#agentpaySetJsonDiv").show();
                       }

                       if (res.data.agentpayAPIConfirmJson) {
                           var agentpayAPIConfirmJson = JSON.parse(res.data.agentpayAPIConfirmJson);
                           if (agentpayAPIConfirmJson.mchOrderNo) {
                               $("#mchOrderNo").val(agentpayAPIConfirmJson.mchOrderNo);
                           }
                           if (agentpayAPIConfirmJson.amount) {
                               $("#amount").val(agentpayAPIConfirmJson.amount);
                           }
                           if (agentpayAPIConfirmJson.notifySuccessStatus) {
                               $("#notifySuccessStatus").val(agentpayAPIConfirmJson.notifySuccessStatus);
                           }
                           if (agentpayAPIConfirmJson.notifyFailStatus) {
                               $("#notifyFailStatus").val(agentpayAPIConfirmJson.notifyFailStatus);
                           }
                       }
                       form.render();

                       form.render('radio', 'paySetDivForm');
                   }
               }
           });
       };

       $.refresh();

       var openPrivateKeyId;
       $('#privateKeyBtn').click(function() {
           $("#privateKeyCode").val('');
           openPrivateKeyId = layer.open({
               title: '商户秘钥',
               type: 1,
               shade: 0,
               area: '580px',
               content: $('#privateKeyDiv')
           });
       });
       //监听提交
       form.on('submit(btnPrivateKey)', function(data){
           admin.req({
               type: 'post',
               url: layui.setter.baseUrl + '/mch/key_update',
               data: data.field,
               success: function(res){
                   if(res.code == 0){
                       layer.alert(res.msg, {title: '提示'}, function(index){
                           layer.close(index);
                           layer.close(openPrivateKeyId);
                           $('.payPassword').val('');
                           $.refresh();
                       });
                   }
               }
           });
           return false;
       });

       $('#randomBuildKey').click(function() {
           $('#privateKey').val(randomWord(false, 128));
       });

       // 绑定谷歌验证
       var openBindId;
       $('#bindGoogleAuth').click(function() {
           admin.req({
               type: 'post',
               url: layui.setter.baseUrl + '/security/google_qrcode',
               success: function(res){
                   $("#googleAuthCode").val('');
                   if(res.code == 0){
                       $('#googleQrCode').attr("src", res.data.qrcodeUrl);
                       $('#googleKey').html(res.data.googleAuthSecretKey);
                       openBindId = layer.open({
                           title: '绑定谷歌验证',
                           type: 1,
                           shade: 0,
                           area: '580px',
                           content: $('#googleAuthDiv')
                       });
                   }
               }
           });
       });

       form.on('submit(btnBind)', function(data){
           admin.req({
               type: 'post',
               url: layui.setter.baseUrl + '/security/google_bind',
               data: data.field,
               success: function(res){
                   if(res.code == 0){
                       layer.alert(res.msg, function(index){
                           layer.close(index);
                           layer.close(openBindId);
                           $.refresh();
                       });
                   }
               }
           });
           return false;
       });

       // 登录设置
       var openLoginSetId;
       $('#loginSetBtn').click(function() {
           $("#loginSetCode").val('');
           openLoginSetId = layer.open({
               title: '登录设置',
               type: 1,
               shade: 0,
               area: '580px',
               content: $('#loginSetDiv')
           });
       });

       form.on('submit(btnLoginSet)', function(data){
           admin.req({
               type: 'post',
               url: layui.setter.baseUrl + '/security/login_set',
               data: data.field,
               success: function(res){
                   if(res.code == 0){
                       layer.alert(res.msg, function(index){
                           layer.close(index);
                           layer.close(openLoginSetId);
                           $.refresh();
                       });
                   }
               }
           });
           return false;
       });

       // 支付设置
       var openPaySetId;
       $('#paySetBtn').click(function() {
           $("#paySetCode").val('');
           openPaySetId = layer.open({
               title: '支付设置',
               type: 1,
               shade: 0,
               area: '580px',
               content: $('#paySetDiv')
           });
       });

       form.on('submit(btnPaySet)', function(data){
           admin.req({
               type: 'post',
               url: layui.setter.baseUrl + '/security/pay_set',
               data: data.field,
               success: function(res){
                   if(res.code == 0){
                       layer.alert(res.msg, function(index){
                           layer.close(index);
                           layer.close(openPaySetId);
                           $.refresh();
                       });
                   }
               }
           });
           return false;
       });

       form.on('radio(agentpayAPIConfirmFilter)', function (data) {
          if (data.value == '0') {
              $("#agentpaySetJsonDiv").hide();
          } else {
              $("#agentpaySetJsonDiv").show();
          }
       });

       //保存代付设置
       form.on('submit(saveAgentpaySetBtn)', function(data){
           var amount = $.trim($('#amount').val());
           var mchOrderNo = $.trim($('#mchOrderNo').val());
           var notifySuccessStatus = $.trim($('#notifySuccessStatus').val());
           var notifyFailStatus = $.trim($('#notifyFailStatus').val());
           var agentpayAPIConfirmUrl = $.trim($('#agentpayAPIConfirmUrl').val());
           var agentpayAPIConfirmFlag = $('input[name="agentpayAPIConfirmFlag"]:checked ').val();
           if(agentpayAPIConfirmFlag == 1) {
               if(agentpayAPIConfirmUrl == '') {
                   layer.alert("请输入代付接口二次确认地址",{title: '提示'});
                   return false;
               }
               if(!agentpayAPIConfirmUrl.startsWith("http")) {
                   layer.alert("请输入正确的代付接口二次确认地址",{title: '提示'});
                   return false;
               }
               if (mchOrderNo == "") {
                   layer.alert("请输入商户订单号参数名",{title: '提示'});
                   return false;
               }
               if (amount == "") {
                   layer.alert("请输入代付金额参数名",{title: '提示'});
                   return false;
               }
               if (notifySuccessStatus == "") {
                   layer.alert("请输入成功回调返回参数",{title: '提示'});
                   return false;
               }
               if (notifyFailStatus == "") {
                   layer.alert("请输入失败回调返回参数",{title: '提示'});
                   return false;
               }
           }

           admin.req({
               type: 'post',
               url: layui.setter.baseUrl + '/security/agentpay_set',
               data: data.field,
               success: function(res){
                   if(res.code == 0){
                       layer.alert(res.msg, function(index){
                           layer.close(index);
                           $.refresh();
                       });
                   }
               }
           });
           return false;
       });

    });

   /**
    * 随机生成密钥
    * @param randomFlag
    * @param min
    * @param max
    * @returns {string}
    */
   function randomWord(randomFlag, min, max){
       var str = "",
               range = min,
               arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

       // 随机产生
       if(randomFlag){
           range = Math.round(Math.random() * (max-min)) + min;
       }
       for(var i=0; i<range; i++){
           pos = Math.round(Math.random() * (arr.length-1));
           str += arr[pos];
       }
       return str;
   }
   
</script>